<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
    // 设置 CORS 响应头 (全局设了CorsFilter这里可以不用设置)
//    response.setHeader("Access-Control-Allow-Origin", "http://localhost:3030");
//    //response.setHeader("Access-Control-Allow-Origin", "http://http://192.168.16.130");
//    response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
//    response.setHeader("Access-Control-Allow-Headers", "*");
//    response.setHeader("Access-Control-Allow-Credentials", "true");
//    response.setHeader("Access-Control-Max-Age", "3600");

//    System.out.println("绝对路径："+request.getContextPath()); // '/myJspDemo'

    String appUrl = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath();
    // out.println(appUrl);

%>
<!DOCTYPE html>
<html>
<head>
    <title>子应用JSP-微前端模式-index</title>
    <link href="<%= appUrl %>/css/style.css" rel="stylesheet">
    <base href="<%= appUrl %>/"><%--必须设置，html里可直接使用${pageContext.request.contextPath}--%>
<%--    <base href="${pageContext.request.contextPath}/"> 这个在微前端里不行，需要http全路径--%>
</head>
<body>
<h1><%= "Hello World!" %>
</h1>
<br/>


<a href="<%= appUrl %>/hello-servlet">Hello Servlet</a>
<br/>
<a href="<%= appUrl %>/user-servlet">User Servlet</a>
<a href="${pageContext.request.contextPath}/user-servlet">/User Servlet</a>

<br/>
<a href="${pageContext.request.contextPath}/user-servlet">
    ${pageContext.request.contextPath}/user-servlet <br/>
        这种绝对路径在微前端里不行，需要改为全路径如：http://ip:port/myJspDemo/user-servlet
</a>
<script>
    // 防止子应用修改history
    if(window.__MICRO_APP_ENVIRONMENT__) {
        console.log('====myJspDemo history')
        window.history.replaceState = () => {}
    }
</script>
<script>
    function navigateTo(path) {
        // 这个执行不ok
        window.microApp.location.href = path;
        //<%
        //String p = appUrl+"/user-servlet";
        //response.sendRedirect(p);
        //%>
    }

    // 与基座进行数据交互
    function handleMicroData () {
        // 是否是微前端环境
        if (window.__MICRO_APP_ENVIRONMENT__) {
            // 主动获取基座下发的数据
            console.log('child-myJspDemo getData:', window.microApp.getData())

            // 监听基座下发的数据变化
            window.microApp.addDataListener((data) => {
                // 数据格式: {msg: '', path:'/hello-servlet'}
                console.log('child-myJspDemo addDataListener:', data)

                // 当基座下发path时进行跳转
                if(data.path) {
                    var servletPath = "<%= appUrl %>"+data.path;
                    console.log('child-myJspDemo rrrrr:',servletPath)
                    navigateTo(servletPath)
                }
                //if (data.path && data.path !== router.currentRoute.path) {
                    // router.push(data.path)
                //}
            })

            // 向基座发送数据
            setTimeout(() => {
                window.microApp.dispatch({ myname: 'child-myJspDemo' })
            }, 3000)
        }
    }

    const mount = () => {
        console.log('====myJspDemo mount')
        // 初始化

        // micro-app 监听
        handleMicroData()
    }
    const unmount = () => {
        console.log('====myJspDemo unmount')
        myApp = null
    }
    // 微前端环境下，注册mount和unmount方法
    if (window.__MICRO_APP_ENVIRONMENT__) {
        console.log('====有 micro-app ',window.__MICRO_APP_NAME__)
        window[`micro-app-${window.__MICRO_APP_NAME__}`] = { mount, unmount }
        mount()
    } else {
        console.log('====无 micro-app')
        // 非微前端环境直接渲染
        mount()
    }
</script>
</body>
</html>